<template>
  <div>
    <div>{{ result }}</div>
    <div :title="hover | rev">{{ reverseMsg }}</div>
    <div :title="hover | rev">{{ reverseMsg }}</div>
    <div :title="hover | rev">{{ reverseMsg }}</div>
    <div :title="hover | rev">{{ reverseMsg }}</div>
    <div :title="hover | rev">{{ revMsg() }}</div>
    <div :title="hover | rev">{{ revMsg() }}</div>
    <div :title="hover | rev">{{ revMsg() }}</div>
    <div :title="hover | rev">{{ revMsg() }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 10,
      b: 5,
      msg: "Hello, Vue",
      hover: "info",
    };
  },
  methods: {
    revMsg() {
      console.log("方法调用");
      return this.msg.split("").reverse().join("");
    },
  },
  computed: {
    result() {
      return this.a + this.b;
    },
    reverseMsg() {
      console.log("计算属性调用");
      return this.msg.split("").reverse().join("");
    },
  },
  filters: {
    rev(val) {
      return val.split("").reverse().join("");
    },
  },
};
</script>

<style>
</style>